﻿<template>
  <transition name="dropdown-content">
    <div v-if="!expand && active"
         class="origin-top-right absolute right-0 mt-2 w-48 bg-ob-deep-900 rounded-lg py-2 shadow-md">
      <slot />
    </div>
    <div v-else-if="expand && active"
         class="flex flex-col justify-center items-center mt-2 w-48 bg-ob-deep-900 rounded-lg py-2">
      <slot />
    </div>
  </transition>
</template>

<script lang="ts">
import {defineComponent, inject, computed} from 'vue'
export default defineComponent({
  name: 'DropdownMenu',
  props: {
    expand: {
      type: Boolean,
      default: false
    }
  },
  setup(props) {
    const sharedState = inject('sharedState', {active: false})
    const active = computed(() => sharedState.active)
    return {active}
  }
})
// 变换原点: 设置为右上角，用于控制动画效果。
//绝对定位: 使元素相对于最近的已定位祖先元素进行定位。
//右侧对齐: 紧贴其包含块的右侧。
//顶部间距: 为元素添加顶部间距，使其与上方元素之间有分隔。
//宽度: 设置为 192px，定义下拉菜单的宽度。
//背景颜色: 设置为深色背景，提升视觉效果。
//圆角: 设置边框半径为 8px，使边角变圆。
//垂直内边距: 为元素内容提供垂直间距，使其不紧贴边框。
//阴影: 提供中等大小的阴影效果，使元素看起来更立体。

//Flexbox 容器: 启用 Flexbox 布局，允许子元素以灵活的方式排列。
// 垂直方向: 子元素按垂直方向排列。
// 垂直居中: 子元素在垂直方向上居中显示。
// 水平居中: 子元素在水平方向上居中显示。

</script>



<style scoped>

</style>